<section>


    <div class="help-content">
        <h3 class="info-title smaller" data-id="#pages/pricing">Pricing Tables</h3>
        <!-- #section:pages/pricing -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Pricing tables are widget boxes with a few additonal class names.
                    <br/>
                    For more info about pricing page see:
                    <br/>
                    <code data-open-file="html" class="open-file"><span
                            class="brief-show">mustache/app/views/pages/</span>pricing.mustache</code>
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-large.mustache</code>
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-small.mustache</code>
                </li>

                <li>
                    Small pricing style consist of header and body:
<pre data-language="html">
 <div class="pricing-span-header col-xs-4 col-sm-3">
     ...
 </div>
 <div class="pricing-span-body col-xs-8 col-sm-9">
     <div class="pricing-span">
         <!-- widget boxes here -->
     </div>
 </div>
</pre>

                </li>
                <li>
                    <!-- #section:pages/pricing.small-header -->
                    Header which contains feature list is a widget box and has a <code>.pricing-table-header.list-striped</code>
                    inside it:
<pre data-language="html">
 <div class="widget-box transparent">
     <div class="widget-header"><h5 class="widget-title">Package Name</h5></div>
     <div class="widget-body">
         <div class="widget-main no-padding">
             <ul class="pricing-table-header list-striped list-unstyled">
                 <li>...</li>
                 <li>...</li>
                 <li>...</li>
             </ul>
         </div>
         <!-- /.widget-main -->
     </div>
     <!-- /.widget-body -->
 </div><!-- /.widget-box -->
</pre>

                    <!-- /section:pages/pricing.small-header -->
                </li>

                <li>
                    <!-- #section:pages/pricing.small-body -->
                    Also body consists of several widget boxes with <code>.pricing-box-small</code> class
                    and a <code>.list-striped.pricing-table</code> list and a <code>.price</code> inside it:
<pre data-language="html">
 <div class="pricing-box-small widget-box widget-color-blue">
     <div class="widget-header"><h5 class="widget-title bigger lighter">Name</h5></div>
     <div class="widget-body">

         <div class="widget-main no-padding">
             <ul class="pricing-table list-striped list-unstyled">
                 <li>...</li>
                 <li>...</li>
                 <li>...</li>
             </ul>

             <div class="price">
            <span class="label label-lg label-inverse arrowed-in arrowed-in-right">
               $5<small>/month</small>
            </span>
             </div>
         </div>
         <!-- /.widget-main -->

         <div>
             <a href="#" class="btn btn-block btn-sm btn-primary"><span>Buy</span></a>
         </div>

     </div>
     <!-- /.widget-body -->
 </div><!-- /.widget-box -->
</pre>

                    <!-- /section:pages/pricing.small-body -->
                </li>

                <li>
                    <!-- #section:pages/pricing.large -->
                    Large pricing tables are widget boxes with <code>.pricing-box</code> class:
<pre data-language="html">
<div class="row">
    <div class="pricing-box col-xs-6 col-sm-3">
    </div>
    ...
</div>
</pre>
                    <!-- /section:pages/pricing.large -->
                </li>

            </ul>
        </div>
        <!-- /section:pages/pricing -->

    </div>

</section>